<script setup>
import Head from '../components/head.vue'
import asider from '../components/aside.vue'
import {computed, onMounted, ref} from 'vue'
import router from "../router";
import axios from "axios";
var data = sessionStorage.getItem('manager');
onMounted(async ()=> {
  //判断是否有人登录
  if (data == null) {//未登录就通过路径跳转直接送回登录页面
    alert("不买票就想上车？不登录你就想搞事？");
    router.push('/')
  }
})
//转换为响应式数据在表单中使用
const Data = ref(JSON.parse(data));
//主要修改密码，也可一起修改昵称
const Update=async()=>{
  if(passwordsMatch.value){
    //axios方法与后端一致，非get方法后端使用@Requestbody接收数据
    const response = await axios({url:'/manager/update', method:'put', data: {username:Data.value.username, nickname:Data.value.nickname, password:Data.value.password}})
        .then(result=> {
          if (result.data.message.includes("修改成功")) {
            alert(result.data.message);
            sessionStorage.removeItem('manager');
            router.push('/')
          } else {
            alert(result.data.message);
          }
        }).catch(error => {
          alert('请求出现问题，请稍后再试' + error);
        })
  }else {
    alert("都提醒你了两次密码不一致了，这咋还这么犟呢");
  }

}
//只修改昵称
const Updatenickname=async ()=>{
  //axios方法与后端一致，非get方法后端使用@Requestbody接收数据
  const response = await axios({url:'/manager/update', method:'put', data: {username:Data.value.username, nickname:Data.value.nickname, password:Data.value.password}})
   .then(result=> {
      if (result.data.message.includes("修改成功")) {
              sessionStorage.setItem('manager',JSON.stringify(result.data.data));
              data=sessionStorage.getItem('manager');
      }else {
        alert(result.data.message);
      }
   })
}
const passwordsMatch = computed(() => {
  return Data.value.password === Data.value.Againpassword;
});
const againpassword = ref(null);
const addNewProperty = () => {
  // 使用Object.assign添加新属性
  Object.assign(Data.value, { Againpassword: againpassword.value });
};
</script>
<template>
  <div class="common-layout" style="text-align: center;">
    <Head></Head>
    <el-container style="height: 80vh">
      <asider></asider>
      <el-main>
        <el-form :model="Data"  style="width: 300px;margin: 100px 400px" >
          <el-form-item label="昵称：" prop="nickname" >
            <el-input v-model="Data.nickname" />
          </el-form-item>
          <el-form-item style="margin: 20px 120px">
            <el-button type="primary" @click="Updatenickname">
              修改昵称
            </el-button>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="Data.password" type="password" />
          </el-form-item>
          <el-form-item label="确认密码：" >
            <el-input v-model="againpassword" type="password" @input="addNewProperty"/>
          </el-form-item>
          <el-form-item>
            <span v-if="passwordsMatch">密码一致</span>
            <span v-else style="color: red;">密码不一致</span>
          </el-form-item>
          <el-form-item style="margin: 20px 100px">
            <el-button type="primary" @click="Update">
              修改密码和昵称
            </el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>